<template>
  <div class="payfind-wrap">
    <div class="payfind-card">
      <h2>确认缴费</h2>
      <div class="pay-row">科室: {{ payconfirm.officeName }}</div>
      <div class="pay-row">房间号: {{ payconfirm.roomCode }}</div>
      <div class="pay-row">病人姓名: {{ payconfirm.name }}</div>
      <div class="pay-row">病人编号: {{ payconfirm.patientCode }}</div>
      <div class="pay-row">入院时间: {{ payconfirm.startTime }}</div>
      <div class="pay-row pay-total">缴费金额：{{ payconfirm.total }}元</div>
      <div class="pay-btns">
        <el-button @click="goBack">取消缴费</el-button>
        <el-button type="primary" @click="goawaypay(payRow)">立即缴费</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import http from '@/api/http.js'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const id = route.params.id

//定义支付数据对象
const payconfirm= reactive({
    officeCode: "",
    officeName: "",
    roomCode: "",
    name: "",
    patientCode: "",
    total: "",
    startTime: ""
})

// 显示页面
const getpayconfirm = () => {
    http.get(`/api/Patient/FindPayInfo?Id=${id}`)
    .then(res => {
        if (res && res.data && res.data.length > 0) {
            Object.assign(payconfirm, res.data[0])
        }
    })
}

// 创建支付数据对象
const payRow = computed(() => {
  return {
    patientCode: payconfirm.patientCode || '1', // 使用病人编号作为交易号
    tradeNo: "133", // 使用病人编号作为交易号
    subject: `${payconfirm.name}的医疗费用`,  // 支付标题
    totalAmount: payconfirm.total || '0.01',  // 总金额
    body: `支付${payconfirm.name}的医疗费用`  // 支付详情
  };
});

const goawaypay = (row: any) => {
  const payParams = {
    patientCode: row.patientCode,//患者编号       
    tradeNo: row.tradeNo,  // 默认交易号
    subject: row.subject,  // 默认支付标题
    totalAmount: row.totalAmount,  // 默认金额（1分钱）
    body: row.body  // 默认支付详情
  };

  http.post("/api/Patient/AlipaySubmit/AlipaySubmit", payParams)
  .then(res => {
    if (typeof res === 'string') {
      if (res.includes('http') || res.includes('https')) {
        window.open(res, '_blank');
      } else {
        const payWindow = window.open('', '_blank');
        if (payWindow) {
          payWindow.document.write(res);
          payWindow.document.close();
        }
      }
    } else if (res && res.formHtml) {
      const payWindow = window.open('', '_blank');
      if (payWindow) {
        payWindow.document.write(res.formHtml);
        payWindow.document.close();
      }
    } else if (res && res.payUrl) {
      window.open(res.payUrl, '_blank');
    }
  })
  .catch(err => {
    console.error('支付失败:', err);
    ElMessage.error('支付发起失败');
  });
};

const goBack = () => {
  router.back()
}

onMounted(() => {
  getpayconfirm();
});

</script>

<style scoped>
.payfind-wrap {
  min-height: 100vh;
  background: #f7fafd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.payfind-card {
  background: #fff;
  border-radius: 10px;
  padding: 40px 60px 32px 60px;
  min-width: 400px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
}
h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 32px;
}
.pay-row {
  font-size: 16px;
  margin-bottom: 12px;
  color: #222;
}
.pay-total {
  font-size: 18px;
  font-weight: bold;
  margin: 24px 0 32px 0;
  color: #222;
}
.pay-btns {
  display: flex;
  gap: 24px;
  justify-content: center;
}
</style>

